<template>
  <div class="modelingBox">
    <div class="sample flex">
      <div class="leftArea">
        <div class="wrap">
          <h3>通用元组件</h3>
          <div id="myPaletteDiv" style="height: 100vh ; min-width:340px;margin-right: 2px;"></div>
        </div>
      </div>
      <div class="rightArea" style="position: relative;">
        <div class="wrap">
          <h3>流程库</h3>
          <div id="lck" style=" height: 8vh ; min-width:200px;margin-right: 2px;"></div>
        </div>
        <div id="myDiagramDiv" style="height:90vh;display:none; background-color: #fafafa;"></div>
        <div id="myDiagramDiv2" style="flex: 8; height:76vh; background-color: #fafafa; "></div>
        <ul id="contextMenu" class="ctxmenu">
          <li id="edit" class="menu-item" @click="cxcommand($event)">编辑</li>
          <li id="cut" class="menu-item" @click="cxcommand($event)">剪切</li>
          <li id="copy" class="menu-item" @click="cxcommand($event)">复制</li>
          <li id="paste" class="menu-item" @click="cxcommand($event)">粘贴</li>
          <li id="delete" class="menu-item" @click="cxcommand($event)">删除</li>
        </ul>
        <div>
          <el-form>
<!--            <el-form-item label="上传文件：">-->
<!--              <el-input class="inputFile" v-model="Files" placeholder="请输入要上传的文件"></el-input>-->
<!--              <el-upload-->
<!--                class="upload-demo"-->
<!--                action="https://jsonplaceholder.typicode.com/posts/"-->
<!--                :on-preview="handlePreview"-->
<!--                :on-remove="handleRemove"-->
<!--                :before-remove="beforeRemove"-->
<!--                :on-success="handleAvatarSuccess"-->
<!--                multiple-->
<!--                :limit="3"-->
<!--                :on-exceed="handleExceed"-->
<!--                :file-list="fileList"-->
<!--              >-->
<!--                <el-button size="small" type="primary">选择文件上传</el-button>-->
<!--                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--              </el-upload>-->
<!--            </el-form-item>-->
            <el-form-item label="流程名字：">
              <el-input class="inputFile" v-model="liuChengName" placeholder="测试流程例子"></el-input>

<!--              <el-button @click="newLc">新建流程</el-button>-->
              <el-button @click="save">保存流程</el-button>
<!--              <el-button @click="del">删除流程</el-button>-->
<!--              <el-button @click="down">导出流程</el-button>-->
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <el-dialog title="详细信息" :visible.sync="dialogFormVisible" width="80%">
      <el-row>
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.text" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="发射工位" :label-width="formLabelWidth">
            <el-select v-model="form.region" size="mini" placeholder="请选择发射工位">
              <el-option label="工位1" value="shanghai"></el-option>
              <el-option label="工位二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-col :span="24">
            <el-form-item label="参试设备：" :label-width="formLabelWidth">
              <el-checkbox-group v-model="form.equipment" v-for="item in form.equipment" :key="item.id">
                <el-checkbox :label="item">{{item}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="弹道数据：" :label-width="formLabelWidth">
<!--              <el-checkbox-group v-model="form.trajectory" v-for="item in form.trajectory">-->
<!--                <el-checkbox :label="item" :key="item">{{item}}</el-checkbox>-->
<!--              </el-checkbox-group>-->
              <el-select v-model="form.trajectory" size="mini" placeholder="请选择弹道数据">
                <el-option label="弹道1" value="shanghai"></el-option>
                <el-option label="弹道2" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="遥测数据：" :label-width="formLabelWidth">
<!--              <el-checkbox-group v-model="form.telemetering" v-for="item in form.telemetering">-->
<!--                <el-checkbox :label="item" :key="item">{{item}}</el-checkbox>-->
<!--              </el-checkbox-group>-->
              <el-select v-model="form.trajectory" size="mini" placeholder="请选择遥测数据">
                <el-option label="遥测数据1" value="shanghai"></el-option>
                <el-option label="遥测数据2" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <h4 :style="{paddingLeft:'20px',paddingBottom:'10px'}">应急内容:<span :style="{float: 'right'}"><el-button size="mini">新增</el-button></span></h4>
        <el-col :span="24">
          <el-table
            :data="form.tableData"
            border
            highlight-current-row
          >
            <el-table-column
              prop="date"
              label="设备名称"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.date" size="mini" />
                {{scope.date}}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="是否发送T0"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" size="mini" />
                {{scope.date}}
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="主备切换">
              <template slot-scope="scope">
                <el-input v-model="scope.row.address" size="mini" />
                {{scope.date}}
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="发固定值">
              <template slot-scope="scope">
                <el-input v-model="scope.row.address" size="mini" />
                {{scope.date}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index)"
                  type="text"
                  size="mini">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="center"
            background
            layout="prev, pager, next"
            :total="1000">
          </el-pagination>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
 <script>
import FileSaver from "file-saver";
import go from "gojs";
export default {
  data() {
    return {
      StartShow: false,
      ActivityShow: false,
      Files: "",
      liuChengName: "",
      valueOptions: "",
      fileList: [],
      myDiagram: null,
      tempDiagram: null,
      cxElement: null,
      form: {
      },
      dialogFormVisible: false,
      formLabelWidth: '120px'
    };
  },
  methods: {
    initLck($, idNode, idNode2, arrButton) {
      let myDiagram = $(
        go.Diagram,
        idNode, // must name or refer to the DIV HTML element
        {
          LinkDrawn: showLinkLabel, // this DiagramEvent listener is defined below
          LinkRelinked: showLinkLabel,
          "undoManager.isEnabled": true // enable undo & redo
        }
      );

      function nodeStyle() {
        return [
          // The Node.location comes from the "loc" property of the node data,
          // converted by the Point.parse static method.
          // If the Node.location is changed, it updates the "loc" property of the node data,
          // converting back using the Point.stringify static method.
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(
            go.Point.stringify
          ),
          {
            // the Node.location is at the center of each node
            locationSpot: go.Spot.Center
          }
        ];
      }

      function makePort(name, align, spot, output, input) {
        var horizontal =
          align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
        // the port is basically just a transparent rectangle that stretches along the side of the node,
        // and becomes colored when the mouse passes over it
        return $(go.Shape, {
          fill: "transparent", // changed to a color in the mouseEnter event handler
          strokeWidth: 0, // no stroke
          width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
          height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
          alignment: align, // align the port on the main Shape
          stretch: horizontal
            ? go.GraphObject.Horizontal
            : go.GraphObject.Vertical,
          portId: name, // declare this object to be a "port"
          fromSpot: spot, // declare where links may connect at this port
          fromLinkable: output, // declare whether the user may draw links from here
          toSpot: spot, // declare where links may connect at this port
          toLinkable: input, // declare whether the user may draw links to here
          cursor: "pointer", // show a different cursor to indicate potential link point
          mouseEnter: function(e, port) {
            // the PORT argument will be this Shape
            if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
          },
          mouseLeave: function(e, port) {
            port.fill = "transparent";
          }
        });
      }
      function textStyle() {
        return {
          font: "bold 11pt Lato, Helvetica, Arial, sans-serif",
          stroke: "#F8F8F8"
        };
      }
      // this function is used to highlight a Group that the selection may be dropped into
      function highlightGroup(e, grp, show) {
        if (!grp) return;
        e.handled = true;
        if (show) {
          // cannot depend on the grp.diagram.selection in the case of external drag-and-drops;
          // instead depend on the DraggingTool.draggedParts or .copiedParts
          var tool = grp.diagram.toolManager.draggingTool;
          var map = tool.draggedParts || tool.copiedParts; // this is a Map
          // now we can check to see if the Group will accept membership of the dragged Parts
          if (grp.canAddMembers(map.toKeySet())) {
            grp.isHighlighted = true;
            return;
          }
        }
        grp.isHighlighted = false;
      }

      function finishDrop(e, grp) {
        var ok =
          grp !== null
            ? grp.addMembers(grp.diagram.selection, true)
            : e.diagram.commandHandler.addTopLevelParts(
                e.diagram.selection,
                true
              );
        if (!ok) e.diagram.currentTool.doCancel();
      }

      // Since we have only one main element, we don't have to declare a hide method,
      // we can set mainElement and GoJS will hide it automatically
      var myContextMenu = $(go.HTMLInfo, {
        show: this.showContextMenu,
        hide: this.hideContextMenu
      });
      this.cxElement = document.getElementById("contextMenu");
      // We don't want the div acting as a context menu to have a (browser) context menu!
      this.cxElement.addEventListener(
        "contextmenu",
        function(e) {
          e.preventDefault();
          return false;
        },
        false
      );

      myDiagram.groupTemplateMap.add(
        "OfGroups",
        $(
          go.Group,
          "Auto",
          {
            background: "transparent",
            // highlight when dragging into the Group
            mouseDragEnter: function(e, grp, prev) {
              highlightGroup(e, grp, true);
            },
            mouseDragLeave: function(e, grp, next) {
              highlightGroup(e, grp, false);
            },
            computesBoundsAfterDrag: true,
            // when the selection is dropped into a Group, add the selected Parts into that Group;
            // if it fails, cancel the tool, rolling back any changes
            mouseDrop: finishDrop,
            handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
            // Groups containing Groups lay out their members horizontally
            layout: $(go.GridLayout, {
              wrappingWidth: Infinity,
              alignment: go.GridLayout.Position,
              cellSize: new go.Size(1, 1),
              spacing: new go.Size(4, 4)
            })
          },
          new go.Binding("background", "isHighlighted", function(h) {
            return h ? "rgba(255,0,0,0.2)" : "transparent";
          }).ofObject(),
          $(go.Shape, "Rectangle", {
            fill: null,
            stroke: "#FFDD33",
            strokeWidth: 2
          }),
          $(
            go.Panel,
            "Vertical", // title above Placeholder
            $(
              go.Panel,
              "Horizontal", // button next to TextBlock
              { stretch: go.GraphObject.Horizontal, background: "#FFDD33" },
              $("SubGraphExpanderButton", {
                alignment: go.Spot.Right,
                margin: 5
              }),
              $(
                go.TextBlock,
                {
                  alignment: go.Spot.Left,
                  editable: true,
                  margin: 5,
                  font: "bold 18px sans-serif",
                  opacity: 0.75,
                  stroke: "#404040"
                },
                new go.Binding("text", "text").makeTwoWay()
              )
            ), // end Horizontal Panel
            $(go.Placeholder, { padding: 5, alignment: go.Spot.TopLeft })
          ) // end Vertical Panel
        )
      ); // end Group and call to add to template Map

      myDiagram.groupTemplateMap.add(
        "OfNodes",
        $(
          go.Group,
          "Auto",
          {
            background: "transparent",
            ungroupable: true,
            // highlight when dragging into the Group
            mouseDragEnter: function(e, grp, prev) {
              highlightGroup(e, grp, true);
            },
            mouseDragLeave: function(e, grp, next) {
              highlightGroup(e, grp, false);
            },
            computesBoundsAfterDrag: true,
            // when the selection is dropped into a Group, add the selected Parts into that Group;
            // if it fails, cancel the tool, rolling back any changes
            mouseDrop: finishDrop,
            handlesDragDropForMembers: true, // don't need to define handlers on member Nodes and Links
            // Groups containing Nodes lay out their members vertically
            layout: $(go.GridLayout, {
              wrappingColumn: 1,
              alignment: go.GridLayout.Position,
              cellSize: new go.Size(1, 1),
              spacing: new go.Size(4, 4)
            })
          },
          new go.Binding("background", "isHighlighted", function(h) {
            return h ? "rgba(255,0,0,0.2)" : "transparent";
          }).ofObject(),
          $(go.Shape, "Rectangle", {
            fill: null,
            stroke: "#33D3E5",
            strokeWidth: 2
          }),
          $(
            go.Panel,
            "Vertical", // title above Placeholder
            $(
              go.Panel,
              "Horizontal", // button next to TextBlock
              { stretch: go.GraphObject.Horizontal, background: "#33D3E5" },
              $("SubGraphExpanderButton", {
                alignment: go.Spot.Right,
                margin: 5
              }),
              $(
                go.TextBlock,
                {
                  alignment: go.Spot.Left,
                  editable: true,
                  margin: 5,
                  font: "bold 16px sans-serif",
                  opacity: 0.75,
                  stroke: "#404040"
                },
                new go.Binding("text", "text").makeTwoWay()
              )
            ), // end Horizontal Panel
            $(go.Placeholder, { padding: 5, alignment: go.Spot.TopLeft })
          ) // end Vertical Panel
        )
      ); // end Group and call to add to template Map

      myDiagram.nodeTemplate = $(
        go.Node,
        "Auto",
        {
          // dropping on a Node is the same as dropping on its containing Group, even if it's top-level
          mouseDrop: function(e, nod) {
            finishDrop(e, nod.containingGroup);
          }
        },
        $(
          go.Shape,
          "Rectangle",
          { fill: "#ACE600", stroke: null },
          new go.Binding("fill", "color")
        ),
        $(
          go.TextBlock,
          {
            margin: 5,
            editable: true,
            font: "bold 13px sans-serif",
            opacity: 0.75,
            stroke: "#404040"
          },
          new go.Binding("text", "text").makeTwoWay()
        )
      );
      // define the Node templates for regular nodes
      myDiagram.nodeTemplateMap.add(
        "", // the default category
        $(
          go.Node,
          "Table",
          nodeStyle(),
          // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
          $(
            go.Panel,
            "Auto",
            { contextMenu: myContextMenu },
            $(
              go.Shape,
              "Rectangle",
              { fill: "#282c34", stroke: "#00A9C9", strokeWidth: 3.5 },
              new go.Binding("figure", "figure")
            ),
            $(
              go.TextBlock,
              textStyle(),
              {
                margin: 8,
                maxSize: new go.Size(160, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: true
              },
              new go.Binding("text").makeTwoWay()
            )
          ),
          // four named ports, one on each side:
          makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
          makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
          makePort("R", go.Spot.Right, go.Spot.RightSide, true, true),
          makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
        )
      );
      myDiagram.nodeTemplateMap.add(
        "Conditional",
        $(
          go.Node,
          "Table",
          nodeStyle(),
          // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
          $(
            go.Panel,
            "Auto",
            { contextMenu: myContextMenu },
            $(
              go.Shape,
              "Diamond",
              { fill: "#282c34", stroke: "#00A9C9", strokeWidth: 3.5 },
              new go.Binding("figure", "figure")
            ),
            $(
              go.TextBlock,
              textStyle(),
              {
                margin: 8,
                maxSize: new go.Size(160, NaN),
                wrap: go.TextBlock.WrapFit,
                editable: true
              },
              new go.Binding("text").makeTwoWay()
            )
          ),
          // four named ports, one on each side:
          makePort("T", go.Spot.Top, go.Spot.Top, false, true),
          makePort("L", go.Spot.Left, go.Spot.Left, true, true),
          makePort("R", go.Spot.Right, go.Spot.Right, true, true),
          makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
        )
      );
      myDiagram.nodeTemplateMap.add(
        "Start",
        $(
          go.Node,
          "Table",
          nodeStyle(),
          $(
            go.Panel,
            "Spot",
            { contextMenu: myContextMenu },
            $(go.Shape, "Circle", {
              desiredSize: new go.Size(70, 70),
              fill: "#282c34",
              stroke: "#09d3ac",
              strokeWidth: 3.5
            }),
            $(go.TextBlock, "Start", textStyle(), new go.Binding("text"))
          ),
          // three named ports, one on each side except the top, all output only:
          makePort("L", go.Spot.Left, go.Spot.Left, true, false),
          makePort("R", go.Spot.Right, go.Spot.Right, true, false),
          makePort("B", go.Spot.Bottom, go.Spot.Bottom, true, false)
        )
      );
      myDiagram.nodeTemplateMap.add(
        "End",
        $(
          go.Node,
          "Table",
          nodeStyle(),
          $(
            go.Panel,
            { contextMenu: myContextMenu },
            "Spot",
            $(go.Shape, "Circle", {
              desiredSize: new go.Size(60, 60),
              fill: "#282c34",
              stroke: "#DC3C00",
              strokeWidth: 3.5
            }),
            $(go.TextBlock, "End", textStyle(), new go.Binding("text"))
          ),
          // three named ports, one on each side except the bottom, all input only:
          makePort("T", go.Spot.Top, go.Spot.Top, false, true),
          makePort("L", go.Spot.Left, go.Spot.Left, false, true),
          makePort("R", go.Spot.Right, go.Spot.Right, false, true)
        )
      );
      // taken from ../extensions/Figures.js:
      go.Shape.defineFigureGenerator("File", function(shape, w, h) {
        var geo = new go.Geometry();
        var fig = new go.PathFigure(0, 0, true); // starting point
        geo.add(fig);
        fig.add(new go.PathSegment(go.PathSegment.Line, 0.75 * w, 0));
        fig.add(new go.PathSegment(go.PathSegment.Line, w, 0.25 * h));
        fig.add(new go.PathSegment(go.PathSegment.Line, w, h));
        fig.add(new go.PathSegment(go.PathSegment.Line, 0, h).close());
        var fig2 = new go.PathFigure(0.75 * w, 0, false);
        geo.add(fig2);
        // The Fold
        fig2.add(new go.PathSegment(go.PathSegment.Line, 0.75 * w, 0.25 * h));
        fig2.add(new go.PathSegment(go.PathSegment.Line, w, 0.25 * h));
        geo.spot1 = new go.Spot(0, 0.25);
        geo.spot2 = go.Spot.BottomRight;
        return geo;
      });
      myDiagram.nodeTemplateMap.add(
        "Comment",
        $(
          go.Node,
          "Auto",
          nodeStyle(),
          $(go.Shape, "File", {
            fill: "#282c34",
            stroke: "#DEE0A3",
            strokeWidth: 3
          }),
          $(
            go.TextBlock,
            textStyle(),
            {
              margin: 8,
              maxSize: new go.Size(200, NaN),
              wrap: go.TextBlock.WrapFit,
              textAlign: "center",
              editable: true
            },
            new go.Binding("text").makeTwoWay()
          )
          // no ports, because no links are allowed to connect with a comment
        )
      );
      // replace the default Link template in the linkTemplateMap
      myDiagram.linkTemplate = $(
        go.Link, // the whole link panel
        {
          routing: go.Link.AvoidsNodes,
          curve: go.Link.JumpOver,
          corner: 5,
          toShortLength: 4,
          relinkableFrom: true,
          relinkableTo: true,
          reshapable: true,
          resegmentable: true,
          // mouse-overs subtly highlight links:
          mouseEnter: function(e, link) {
            link.findObject("HIGHLIGHT").stroke = "rgba(30,144,255,0.2)";
          },
          mouseLeave: function(e, link) {
            link.findObject("HIGHLIGHT").stroke = "transparent";
          },
          selectionAdorned: false
        },
        new go.Binding("points").makeTwoWay(),
        $(
          go.Shape, // the highlight shape, normally transparent
          {
            isPanelMain: true,
            strokeWidth: 8,
            stroke: "transparent",
            name: "HIGHLIGHT"
          }
        ),
        $(
          go.Shape, // the link path shape
          { isPanelMain: true, stroke: "gray", strokeWidth: 2 },
          new go.Binding("stroke", "isSelected", function(sel) {
            return sel ? "dodgerblue" : "gray";
          }).ofObject()
        ),
        $(
          go.Shape, // the arrowhead
          { toArrow: "standard", strokeWidth: 0, fill: "gray" }
        ),
        $(
          go.Panel,
          "Auto", // the link label, normally not visible
          {
            visible: false,
            name: "LABEL",
            segmentIndex: 2,
            segmentFraction: 0.5
          },
          new go.Binding("visible", "visible").makeTwoWay(),
          $(
            go.Shape,
            "RoundedRectangle", // the label shape
            { fill: "#F8F8F8", strokeWidth: 0 }
          ),
          $(
            go.TextBlock,
            "Yes", // the label
            {
              textAlign: "center",
              font: "10pt helvetica, arial, sans-serif",
              stroke: "#333333",
              editable: true
            },
            new go.Binding("text").makeTwoWay()
          )
        )
      );

      // Make link labels visible if coming out of a "conditional" node.
      // This listener is called by the "LinkDrawn" and "LinkRelinked" DiagramEvents.
      function showLinkLabel(e) {
        var label = e.subject.findObject("LABEL");
        if (label !== null)
          label.visible = e.subject.fromNode.data.category === "Conditional";
      }
      // temporary links used by LinkingTool and RelinkingTool are also orthogonal:
      myDiagram.toolManager.linkingTool.temporaryLink.routing =
        go.Link.Orthogonal;
      myDiagram.toolManager.relinkingTool.temporaryLink.routing =
        go.Link.Orthogonal;
      myDiagram.groupTemplate = $(
        go.Group,
        "Auto",
        {
          layout: $(go.LayeredDigraphLayout, {
            direction: 0,
            columnSpacing: 10
          })
        },
        $(
          go.Shape,
          "RoundedRectangle", // surrounds everything
          { parameter1: 10, fill: "rgba(128,128,128,0.33)" }
        ),
        $(
          go.Panel,
          "Vertical", // position header above the subgraph
          { defaultAlignment: go.Spot.Left },
          $(
            go.Panel,
            "Horizontal", // the header
            { defaultAlignment: go.Spot.Top },
            $("SubGraphExpanderButton"), // this Panel acts as a Button
            $(
              go.TextBlock, // group title near top, next to button
              { font: "Bold 12pt Sans-Serif" },
              new go.Binding("text", "key"),
              new go.Binding("stroke", "color")
            )
          ),
          $(
            go.Placeholder, // represents area for all member parts
            { padding: new go.Margin(0, 10), background: "white" }
          )
        )
      );
      myDiagram.layout = $(go.LayeredDigraphLayout, {
        direction: 90,
        layerSpacing: 10,
        isRealtime: false
      });
      var nodeDataArray = [];
      var linkDataArray = [];
      myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
      // initialize the Palette that is on the left side of the page
      var myPalette = $(
        go.Palette,
        idNode2, // must name or refer to the DIV HTML element
        {
          // Instead of the default animation, use a custom fade-down
          "animationManager.initialAnimationStyle": go.AnimationManager.None,
          InitialAnimationStarting: animateFadeDown, // Instead, animate with this function
          nodeTemplateMap: myDiagram.nodeTemplateMap, // share the templates used by myDiagram
          model: new go.GraphLinksModel(arrButton)
        }
      );


      // 为diagram添加一个“对象单机”事件
      myDiagram.addDiagramListener("ObjectSingleClicked",
        function(e) {
          let part = e.subject.part;
          //如果鼠标单机的不是连接线，则显示信息："Clicked on" +  鼠标点击的目标的key值
          if (!(part instanceof go.Link)) {
            console.log( part.data);
          }
        }
      );


      // This is a re-implementation of the default animation, except it fades in from downwards, instead of upwards.
      function animateFadeDown(e) {
        var diagram = e.diagram;
        var animation = new go.Animation();
        animation.isViewportUnconstrained = true; // So Diagram positioning rules let the animation start off-screen
        animation.easing = go.Animation.EaseOutExpo;
        animation.duration = 900;
        // Fade "down", in other words, fade in from above
        animation.add(
          diagram,
          "position",
          diagram.position.copy().offset(0, 200),
          diagram.position
        );
        animation.add(diagram, "opacity", 0, 1);
        animation.start();
      }

      this.myDiagram = myDiagram;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      console.log(file)
    },
    dialogFormConfirm(){
      this.dialogFormVisible = false
      this.nodeDataUpdate(this.form)
    },
    newLc() {
      let obj = {
        class: "GraphLinksModel",
        nodeDataArray: [
          //   {
          //   'category': 'Start',
          //   'text': '开始',
          //   'key': -2,
          //   'loc': '439.06997680664045 36.750000000000085'
          // },
          {
            'category': 'Activity',
            'text': '任务1',
            // TODO:下面三组数组中每个值应该是对象
            'equipment': ['设备1', '设备2', '设备3'],
            'telemetering': null,
            'trajectory': null,
            'tableData': [{
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }],
            'key': -4,
            'loc': '389.06997680664045 121.18772430419928'
          }, {
            'category': 'Activity',
            'text': '联调阶段1',
            'key': -5,
            'loc': '389.06997680664114 186.56317291259757'
          }, {
            'category': 'Activity',
            'text': '联调阶段2',
            'key': -6,
            'loc': '514.0699768066413 186.56317291259768'
          }, {
            'category': 'Activity',
            'text': '第一次内部联调',
            'key': -7,
            'loc': '364.0699768066407 251.93862152099604'
          }, {
            'category': 'Activity',
            'text': '第二次内部联调',
            'key': -8,
            'loc': '539.0699768066406 251.93862152099615'
          }, {
            'category': 'Activity',
            'text': '合练',
            'key': -9,
            'loc': '664.0699768066404 251.93862152099626'
          }, {
            'category': 'Activity',
            'text': '三小时准备',
            'key': -10,
            'loc': '339.0699768066403 317.3140701293949'
          }, {
            'category': 'Activity',
            'text': '两小时准备',
            'key': -11,
            'loc': '464.0699768066409 317.3140701293947'
          }, {
            'category': 'Activity',
            'text': '设备基础检测',
            'key': -12,
            'loc': '189.06997680664017 382.6895187377937'
          }, {
            'category': 'Activity',
            'text': '开始口令',
            'key': -13,
            'loc': '39.069976806640625 382.6895187377937'
          }, {
            'category': 'Activity',
            'text': '连通性检查',
            'key': -14,
            'loc': '339.06997680664085 382.6895187377935'
          }, {
            'category': 'Activity',
            'text': '固定值检测',
            'key': -15,
            'loc': '464.0699768066406 382.689518737793'
          }, {'category': 'Activity', 'text': '完成口令', 'key': -16, 'loc': '589.0699768066406 382.689518737793'}],
        linkDataArray: [ {
          'from': -4,
          'to': -5,
          'points': [389.0699768066406, 138.87544860839841, 389.0699768066406, 148.87544860839841, 389.0699768066406, 153.87544860839841, 389.0699768066406, 153.87544860839841, 389.0699768066406, 158.87544860839841, 389.0699768066406, 168.87544860839841]
        }, {
          'from': -4,
          'to': -6,
          'points': [389.0699768066406, 138.87544860839841, 389.0699768066406, 148.87544860839841, 389.0699768066406, 153.87544860839841, 514.0699768066406, 153.87544860839841, 514.0699768066406, 158.87544860839841, 514.0699768066406, 168.87544860839841]
        }, {
          'from': -5,
          'to': -7,
          'points': [389.0699768066406, 204.25089721679686, 389.0699768066406, 214.25089721679686, 389.0699768066406, 219.2508972167969, 364.0699768066406, 219.2508972167969, 364.0699768066406, 224.2508972167969, 364.0699768066406, 234.2508972167969]
        }, {
          'from': -5,
          'to': -8,
          'points': [389.0699768066406, 204.25089721679686, 389.0699768066406, 214.25089721679686, 389.0699768066406, 219.2508972167969, 539.0699768066406, 219.2508972167969, 539.0699768066406, 224.2508972167969, 539.0699768066406, 234.2508972167969]
        }, {
          'from': -5,
          'to': -9,
          'points': [389.0699768066406, 204.25089721679686, 389.0699768066406, 214.25089721679686, 389.0699768066406, 219.2508972167969, 664.0699768066406, 219.2508972167969, 664.0699768066406, 224.2508972167969, 664.0699768066406, 234.2508972167969]
        }, {
          'from': -7,
          'to': -10,
          'points': [364.0699768066406, 269.6263458251953, 364.0699768066406, 279.6263458251953, 364.0699768066406, 284.6263458251953, 339.0699768066406, 284.6263458251953, 339.0699768066406, 289.6263458251953, 339.0699768066406, 299.6263458251953]
        }, {
          'from': -7,
          'to': -11,
          'points': [364.0699768066406, 269.6263458251953, 364.0699768066406, 279.6263458251953, 364.0699768066406, 284.6263458251953, 464.0699768066406, 284.6263458251953, 464.0699768066406, 289.6263458251953, 464.0699768066406, 299.6263458251953]
        }, {
          'from': -10,
          'to': -13,
          'points': [339.0699768066406, 335.0017944335937, 339.0699768066406, 345.0017944335937, 339.0699768066406, 350.0017944335938, 39.069976806640625, 350.0017944335938, 39.069976806640625, 355.0017944335938, 39.069976806640625, 365.0017944335938]
        }, {
          'from': -10,
          'to': -12,
          'points': [339.0699768066406, 335.0017944335937, 339.0699768066406, 345.0017944335937, 339.0699768066406, 350.0017944335938, 189.06997680664062, 350.0017944335938, 189.06997680664062, 355.0017944335938, 189.06997680664062, 365.0017944335938]
        }, {
          'from': -10,
          'to': -14,
          'points': [339.0699768066406, 335.0017944335937, 339.0699768066406, 345.0017944335937, 339.0699768066406, 350.0017944335938, 339.0699768066406, 350.0017944335938, 339.0699768066406, 355.0017944335938, 339.0699768066406, 365.0017944335938]
        }, {
          'from': -10,
          'to': -15,
          'points': [339.0699768066406, 335.0017944335937, 339.0699768066406, 345.0017944335937, 339.0699768066406, 350.0017944335938, 464.0699768066406, 350.0017944335938, 464.0699768066406, 355.0017944335938, 464.0699768066406, 365.0017944335938]
        }, {
          'from': -10,
          'to': -16,
          'points': [339.0699768066406, 335.0017944335937, 339.0699768066406, 345.0017944335937, 339.0699768066406, 350.0017944335938, 589.0699768066406, 350.0017944335938, 589.0699768066406, 355.0017944335938, 589.0699768066406, 365.0017944335938]
        }]
      };
      this.myDiagram.model = go.Model.fromJson(obj);
    },
    deleteRow(i){
      console.log(i)
    },
    nodeDataUpdate(node) {
      this.myDiagram.model.updateTargetBindings(node)
    },
    save() {
      var date = new Date().getTime();
      var Img = this.myDiagram.makeImage({
        scale: 1,
        background: "white"
      });
      var imgSrc = Img.src;
      var filename = date + ".png";
      var a = document.createElement("a");
      a.style = "display: none";
      a.href = imgSrc;
      a.download = filename;
      requestAnimationFrame(function() {
        a.click();
      });
    },
    down() {
      let json = this.myDiagram.model.toJson();
      this.myDiagram.isModified = false;

      var content = JSON.stringify(json);
      var blob = new Blob([content], { type: "text/plain;charset=utf-8" });
      FileSaver.saveAs(blob, "myDiagram.json");
    },
    del() {
      let obj = {
        class: "GraphLinksModel",
        nodeDataArray: [
          { key: "Alpha", isGroup: true },
          { key: "Beta", group: "Alpha" },
          { key: "Gamma", group: "Alpha", isGroup: true },
          { key: "Delta", group: "Gamma" },
          { key: "Epsilon", group: "Gamma" },
          { key: "Zeta", group: "Alpha" },
          { key: "Eta", group: "Alpha", isGroup: true },
          { key: "Theta", group: "Eta" }
        ],
        linkDataArray: []
      };
      this.myDiagram.model = go.Model.fromJson(obj);
    },
    cxcommand(event, val) {
      if (val === undefined) val = event.currentTarget.id;
      var diagram = this.myDiagram;
      switch (val) {
        case "edit":
          let select = this.myDiagram.selection.first().data
          this.form = select
          this.dialogFormVisible = true
          break;
        case "cut":
          diagram.commandHandler.cutSelection();
          break;
        case "copy":
          diagram.commandHandler.copySelection();
          break;
        case "paste":
          diagram.commandHandler.pasteSelection(
            diagram.toolManager.contextMenuTool.mouseDownPoint
          );
          break;
        case "delete":
          diagram.commandHandler.deleteSelection();
          break;
      }
      diagram.currentTool.stopTool();
    },
    hideCX() {
      if (this.myDiagram.currentTool instanceof go.ContextMenuTool) {
        this.myDiagram.currentTool.doCancel();
      }
    },
    showContextMenu(obj, diagram, tool) {
      // Show only the relevant buttons given the current state.
      var cmd = diagram.commandHandler;
      var hasMenuItem = false;
      function maybeShowItem(elt, pred) {
        if (pred) {
          elt.style.display = "block";
          hasMenuItem = true;
        } else {
          elt.style.display = "none";
        }
      }
      maybeShowItem(document.getElementById("cut"), cmd.canCutSelection());
      maybeShowItem(document.getElementById("copy"), cmd.canCopySelection());
      maybeShowItem(
        document.getElementById("paste"),
        cmd.canPasteSelection(
          diagram.toolManager.contextMenuTool.mouseDownPoint
        )
      );
      maybeShowItem(
        document.getElementById("delete"),
        cmd.canDeleteSelection()
      );

      if (hasMenuItem) {
        this.cxElement.classList.add("show-menu");
        // we don't bother overriding positionContextMenu, we just do it here:
        var mousePt = diagram.lastInput.viewPoint;
        this.cxElement.style.left = mousePt.x + 5 + "px";
        this.cxElement.style.top = mousePt.y + "px";
      }
      // Optional: Use a `window` click listener with event capture to
      //           remove the context menu if the user clicks elsewhere on the page
      window.addEventListener("click", this.hideCX, true);
    },
    hideContextMenu() {
      this.cxElement.classList.remove("show-menu");
      // Optional: Use a `window` click listener with event capture to
      //           remove the context menu if the user clicks elsewhere on the page
      window.removeEventListener("click", this.hideCX, true);
    }
  },
  mounted() {
    var $ = go.GraphObject.make;
    const yzj = [
      // specify the contents of the Palette
      // XX任务是根据计划编排的输入确定的，默认显示任务节点在画布中
      // { category: "Start", text: "开始" },
      // { category: "Activity", text: "任务" },
      { key: "阶段", isGroup: true, color: '#fff' },
      { category: "Activity", text: "准备阶段", group: "阶段" },
      { category: "Activity", text: "实施阶段", group: "阶段"},
      { category: "Activity", text: "合练阶段", group: "阶段" },
      { category: "Activity", text: "实战阶段", group: "阶段" },
      { key: "单次计划", isGroup: true },
      { category: "Activity", text: "内部联调", group: "单次计划" },
      { category: "Activity", text: "基地间联调", group: "单次计划" },
      { key: "准备阶段", isGroup: true },
      { category: "Activity", text: "三小时准备", group: "准备阶段" },
      { category: "Activity", text: "两小时准备", group: "准备阶段" },
      { category: "Activity", text: "一小时准备", group: "准备阶段" },
      { category: "Activity", text: "十分钟准备", group: "准备阶段" },
      { category: "Activity", text: "五分钟准备", group: "准备阶段" },
      { key: "测试项目", isGroup: true },
      { category: "Activity", text: "设备基础检测", group: "测试项目" },
      { category: "Activity", text: "连通性检测", group: "测试项目" },
      { category: "Activity", text: "端到端时延测试", group: "测试项目" },
      { category: "Activity", text: "T0理论弹道检测", group: "测试项目" },
      { category: "Activity", text: "固定值检测", group: "测试项目" },
      // { category: "Conditional", text: "条件" },
      // { category: "Activity", text: "测试项" },
      { key: "口令", isGroup: true },
      { category: "Activity", text: "开始", group: "口令"  },
      { category: "Activity", text: "结束", group: "口令"  },
      // { category: "Comment", text: "备注" },
      // { category: "End", text: "结束" },
      // { key: 1, text: "分组1", isGroup: true, category: "OfGroups" }
    ];
    const lck = [
      // specify the contents of the Palette
      { category: "Activity", text: "流程一" },
      { category: "Activity", text: "流程二" },
      { category: "Activity", text: "流程三" },
      { category: "Activity", text: "流程四" },
      { category: "Activity", text: "流程五" },
      { category: "Activity", text: "流程六" },
      { category: "Activity", text: "流程七" },
      { category: "Activity", text: "流程八" }
    ];

    this.initLck($, "myDiagramDiv", "myPaletteDiv", yzj);
    this.initLck($, "myDiagramDiv2", "lck", lck);
    this.newLc()
  }
};
</script>
<style lang="less" scoped>
.modelingBox {
  background: #556d69;
  .sample {
    display: flex;
    flex-direction: row;
    .leftArea {
      flex: 1;
    }
    .rightArea {
      flex: 5;
    }
    .wrap {
      color: #fff;
      h3 {
        line-height: 35px;
        text-align: center;
        background: #054f68;
        margin-bottom: 20px;
      }
    }
  }
}
.ctxmenu {
  display: none;
  position: absolute;
  opacity: 0;
  margin: 0;
  padding: 8px 0;
  z-index: 999;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  list-style: none;
  background-color: #ffffff;
  border-radius: 4px;
}
.menu-item {
  display: block;
  position: relative;
  min-width: 60px;
  margin: 0;
  padding: 6px 16px;
  font: bold 12px sans-serif;
  color: rgba(0, 0, 0, 0.87);
  cursor: pointer;
}
.menu-item::before {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000000;
}
.menu-item:hover::before {
  opacity: 0.04;
}
.menu .menu {
  top: -8px;
  left: 100%;
}
.show-menu,
.menu-item:hover .ctxmenu {
  display: block;
  opacity: 1;
}
.center{
  text-align: center;
}
.dialog-footer {
  padding-top: 20px;
}
//canvas{
//  border:0;
//  outline:none;
//}
</style>



